<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>

<!-- 导航片段 -->
<nav th:fragment="navbar" class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container">
        <a class="navbar-brand" href="/">
            <i class="bi bi-code-square me-2"></i>
            CRUD Generator
        </a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">
                        <i class="bi bi-house me-1"></i>首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/generator">
                        <i class="bi bi-code me-1"></i>代码生成器
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="bi bi-gear me-1"></i>系统管理
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/settings">
                            <i class="bi bi-gear me-1"></i>系统设置
                        </a></li>
                        <li><a class="dropdown-item" href="/analytics">
                            <i class="bi bi-graph-up me-1"></i>数据统计
                        </a></li>
                        <li><a class="dropdown-item" href="/security">
                            <i class="bi bi-shield-check me-1"></i>安全管理
                        </a></li>
                        <li><a class="dropdown-item" href="/logs">
                            <i class="bi bi-list-ul me-1"></i>日志管理
                        </a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/help">
                        <i class="bi bi-question-circle me-1"></i>帮助
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">
                        <i class="bi bi-info-circle me-1"></i>关于
                    </a>
                </li>
            </ul>
            
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/api/docs" target="_blank">
                        <i class="bi bi-book me-1"></i>API文档
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 页面导航卡片片段 -->
<div th:fragment="page-navigation" class="nav-card">
    <h3 class="text-center mb-4">页面导航</h3>
    
    <div class="page-grid">
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-house"></i>
            </div>
            <h5>首页</h5>
            <p class="text-muted">产品介绍和功能特性展示</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-code"></i>
            </div>
            <h5>代码生成器</h5>
            <p class="text-muted">SQL解析和代码生成工具</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/generator" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-gear"></i>
            </div>
            <h5>系统设置</h5>
            <p class="text-muted">系统配置和参数设置</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/settings" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-graph-up"></i>
            </div>
            <h5>数据统计</h5>
            <p class="text-muted">使用统计和数据分析</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/analytics" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-shield-check"></i>
            </div>
            <h5>安全管理</h5>
            <p class="text-muted">用户权限管理、安全审计和访问控制</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/security" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-list-ul"></i>
            </div>
            <h5>日志管理</h5>
            <p class="text-muted">系统日志查看和管理</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/logs" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-question-circle"></i>
            </div>
            <h5>帮助文档</h5>
            <p class="text-muted">使用指南、API文档和常见问题解答</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/help" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
        
        <div class="page-card">
            <div class="page-icon">
                <i class="bi bi-info-circle"></i>
            </div>
            <h5>关于我们</h5>
            <p class="text-muted">项目介绍和开发团队信息</p>
            <div class="status-badge status-available">已完成</div>
            <br>
            <a href="/about" class="page-link">
                <i class="bi bi-arrow-right me-2"></i>访问页面
            </a>
        </div>
    </div>
    
    <div class="alert alert-info mt-4">
        <h6><i class="bi bi-info-circle me-2"></i>访问说明</h6>
        <ul class="mb-0">
            <li><strong>已完成</strong> - 页面已经完全开发完成，可以正常访问</li>
            <li>所有页面都通过Spring Boot控制器路由，确保正确的资源加载</li>
            <li>页面支持响应式设计，在不同设备上都有良好的用户体验</li>
        </ul>
    </div>
</div>

<style>
.page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.page-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.page-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 15px;
}

.page-link {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.page-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    color: white;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 10px;
}

.status-available {
    background: #d4edda;
    color: #155724;
}

.nav-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    padding: 30px;
}
</style>

</body>
</html>